<template>
  <div
    v-if="!initializing"
    ref="tableBox"
    :class="[
      'cc-table cc-flex-column',
      tableFullscreen ? 'padding-10' : '',
      props.autoHeight === '1' ? 'cc-grow-height' : ''
    ]"
  >
    <div
      v-if="tipsTopHtml"
      class="cc-table-tips-top"
      v-html="tipsTopHtml"
    ></div>
    <div
      v-if="tableInfo.showFull === '1' || tableInfo.showHeaderSetting === '1'"
      class="show-table-fullscreen"
    >
      <cc-icon
        v-if="tableInfo.showHeaderSetting === '1'"
        iconId="018ece4f712124866f78"
        title="显示字段设置"
        style="color: var(--table-setting-icon-color);"
        @click="showHeaderSetting"
      />
      <cc-icon
        v-if="tableInfo.showFull === '1'"
        style="margin-left: 8px;color: var(--table-fullscreen-icon-color);"
        iconId="018dca8cad1b28075ecd"
        title="最大化显示"
        @click="showFullscreen"
      />
    </div>
    <el-table
      ref="dataTable"
      v-loading="querying"
      element-loading-text="数据加载中..."
      width="100%"
      :style="{'user-select': isDragger ? 'none' : ''}"
      highlight-current-row
      :show-header="tableInfo.showHeader === '1'"
      :data="dataList"
      :border="tableInfo.showBorder === '1'"
      :stripe="true"
      :show-overflow-tooltip="true"
      :row-class-name="rowClassName"
      :class="['cc-table', props.autoHeight === '1' ? 'cc-grow-height' : '']"
      :row-key="pkFieldName"
      :span-method="colspan ? colspanMethod : null"
      :show-summary="showSummary"
      :summary-method="getSummaries"
      @sort-change="sortChange"
      @row-click="rowClick"
      @row-dblclick="rowDbClick"
      @selection-change="selectionChange"
      @keydown="handleKeyDown"
      @mousedown="handleMouseDown"
      @mousemove="handleMouseMove"
      @mouseup="handleMouseUp"
    >
      <template #empty>
        <div class="el-table__empty-block">
          <img v-if="!querying" src="@/assets/images/no-data.png" style="width: 100px" alt />
          <span v-if="!querying" style="min-width: 100px">暂无数据</span>
        </div>
      </template>
      <el-table-column
        v-if="tableInfo.showCheckbox === '1'"
        header-align="center"
        align="center"
        type="selection"
        :reserve-selection="pageSelected === '1'"
        width="40"
        :show-overflow-tooltip="false"
      ></el-table-column>
      <el-table-column
        v-if="tableInfo.showOrdinal === '1'"
        header-align="center"
        align="center"
        type="index"
        width="50"
        label="序号"
        :show-overflow-tooltip="false"
      ></el-table-column>
      <el-table-column
        v-for="column in columnList"
        :key="column.id"
        :header-align="align[column.headerAlign] || 'center'"
        :align="align[column.contentAlign] || 'center'"
        :prop="column.fieldName"
        :label="column.aliasName"
        :width="column.width && column.width < 0 ? null : column.width"
        :min-width="column.width && column.width < 0 ? column.width * -1 : null"
        :class-name="column.wrap === '1' ? 'wrap' : 'nowrap'"
        :sortable="column.sortable == null ? 'custom' : column.sortable"
        :fixed="column.fixed === '1' ? true : null"
        :show-overflow-tooltip="(column.canEdit === '1'
              && (column.fieldType === '字符'
                || column.fieldType === '整数'
                || column.fieldType === '小数'
                || column.fieldType === '日期'
                || column.fieldType === '联动')) ? false :
        {
          'effect': 'light',
          'raw-content': false,
          'placement': 'bottom',
          'popper-class': 'padding-10-15'
        }"
      >
        <template
          v-if="column.canEdit === '1'
              && (column.fieldType === '字符'
                || column.fieldType === '整数'
                || column.fieldType === '小数'
                || column.fieldType === '日期'
                || column.fieldType === '联动')"
          v-slot="scope"
        >
          <table-edit-item
            :column="column"
            :single="true"
            :data="scope.row"
            @change="() => changeValue(column.fieldName, scope.row)"
          />
        </template>
        <template v-else v-slot="scope">
          <!-- 字符、整数、小数、日期、时间、图片、视频、附件 -->
          <cc-icon
            v-if="column.showRelevanceIcon === '1'
              && (scope.row[column.fieldName] || scope.row[column.fieldName + '_name'])"
            style="margin-right: 5px;font-size: 14px;flex-shrink: 0;"
            iconId="018ece4f6f023fdc6614"
            class="relevance"
          />
          <div
            v-if="column.fieldType === '图片' && scope.row[column.fieldName]"
            style="display: flex;max-width: 30px;max-height: 30px;"
          >
            <el-image
              style="max-width: 100%;max-height: 100%"
              preview-teleported
              hide-on-click-modal
              :src="imageUrl + scope.row[column.fieldName]"
              :preview-src-list="[imageUrl + scope.row[column.fieldName]]"
              fit="scale-down"
            />
          </div>
          <cc-video-view
            v-else-if="column.fieldType === '视频' && scope.row[column.fieldName]"
            :videoId="scope.row[column.fieldName]"
          />
          <cc-affix-view
            v-else-if="column.fieldType === '附件' && scope.row[column.fieldName]"
            :affixId="scope.row[column.fieldName]"
            :reload="changePage"
          />
          <span
            v-else-if="column.styleList && column.styleList.length > 0"
            :class="['overflow-ellipsis custom-style', column.pageId ? 'relevance' : '']"
            @click="() => relevanceClick(column, scope.row)"
            v-html="parseFieldStyle(
              column.styleList,
              scope.row[column.fieldType === '联动' ? (column.fieldName + '_name') : column.fieldName],
              scope.row
            )"
          ></span>
          <span
            v-else-if="column.fieldType === '小数'"
          >
            {{
              scope.row[column.fieldName] === 0 || scope.row[column.fieldName]
                ? tool.formatMoney(parseFloat(scope.row[column.fieldName] || '0'), column.dataField.fieldPrecision) : ''
            }}
          </span>
          <span
            v-else-if="column.fieldType === '时间'"
            :class="['overflow-ellipsis', column.pageId ? 'relevance' : '']"
            @click="() => relevanceClick(column, scope.row)"
          >{{date.formatLongDate(scope.row[column.fieldName])}}</span>
          <span
            v-else-if="column.fieldType === '字符'
              && (column.dataField.enumerateType === '单位多选'
                || column.dataField.enumerateType === '企业多选'
                || column.dataField.enumerateType === '部门多选')"
            class="overflow-ellipsis"
          ><cc-show-organizations :ids="scope.row[column.fieldName]" /></span>
          <span
            v-else-if="column.fieldType === '字符' && column.dataField.enumerateType === '人员多选'"
            class="overflow-ellipsis"
          ><cc-show-employees :ids="scope.row[column.fieldName]" /></span>
          <span
            v-else-if="column.fieldType === '字符' && column.dataField.enumerateType === '角色多选'"
            class="overflow-ellipsis"
          ><cc-show-roles :ids="scope.row[column.fieldName]" /></span>
          <span
            v-else-if="column.fieldType === '联动' && column.dataField.relevanceType.startsWith('字典')"
            class="overflow-ellipsis"
          ><cc-show-dict :dictCode="column.dataField.relevanceDict" :dictValue="scope.row[column.fieldName]" /></span>
          <span
            v-else
            :class="['overflow-ellipsis', column.pageId ? 'relevance' : '']"
            @click="() => relevanceClick(column, scope.row)"
            :style="column.contentColor ? ('color: ' + column.contentColor) : ''"
          >{{scope.row[column.fieldType === '联动' ? (column.fieldName + '_name') : column.fieldName]}}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="tableInfo.showOperate === '1' && buttonList.length > 0"
        header-align="center"
        align="center"
        label="操作"
        fixed="right"
        :width="buttonList.length * (isMobile ? 25 : 38) + 30"
        :show-overflow-tooltip="false"
      >
        <template v-slot="scope">
          <div class="cc-button">
            <div
              class="cc-button-item"
              v-for="(button, index) in buttonList.filter(item => checkButtonShow(item, scope.row, dataFieldList))"
              :key="index"
            >
              <el-tooltip
                placement="bottom"
                :enterable="false"
                :show-after="0"
                :hide-after="0"
                :content="button.name"
                :trigger="isMobile ? 'contextmenu' : 'hover'"
                popper-class="padding-10-15"
                effect="light"
              >
                <el-button
                  v-if="button.backgroundColor"
                  circle
                  :style="{
                    'color': button.fontColor,
                    'background-color': button.backgroundColor,
                    'border': button.borderColor ? '1px solid ' + button.borderColor : 'none'
                  }"
                  @click.stop="buttonClick(button, scope.row)"
                >
                  <cc-icon :iconId="button.iconId" />
                </el-button>
                <span
                  v-else
                  :style="{ 'color': button.fontColor, 'cursor': 'pointer' }"
                  @click.stop="buttonClick(button, scope.row)"
                >
                  <cc-icon :iconId="button.iconId" />
                </span>
              </el-tooltip>
            </div>
          </div>
        </template>
      </el-table-column>
      <template v-if="$slots.append" #append>
        <slot name="append"></slot>
      </template>
    </el-table>
    <div class="cc-table-footer">
      <div class="cc-table-refresh">
        <el-checkbox
          v-if="!isMobile && !dialogMode && showRefresh === '1'"
          v-model="autoRefresh"
          @change="changeAutoRefresh"
          style="margin-right: 10px;"
        >
          <el-tooltip
            effect="light"
            popper-class="padding-10-15"
            content="勾选自动刷新时，如有数据更新时自动刷新表格数据"
            :enterable="false"
          >自动刷新</el-tooltip>
        </el-checkbox>
        <el-tooltip
          v-if="!isMobile && isOverflow"
          effect="light"
          popper-class="padding-10-15"
          content="拖动模式：开启时在表格中按住鼠标左键，可左右拖动表格，如需要复制内容请关闭此模式。"
          :enterable="false"
        >
          <el-switch v-model="isDragger" style="margin-right: 10px;" />
        </el-tooltip>
        <span v-if="pageSelected === '1'">已选数据：
          <span style="cursor: pointer" @click="showSelected">{{selectedCnt}}</span> 条
        </span>
      </div>
      <div v-if="tableInfo.showPagination === '1'" class="cc-pagination">
        <el-pagination
          layout="total, prev, pager, next, jumper, sizes"
          :pager-count="isMobile ? 5 : 7"
          :current-page="queryInfo.pageNumber"
          :page-sizes="[10, 20, 50, 100, 500]"
          :page-size="queryInfo.pageSize"
          :total="dataTotal"
          @current-change="(pageNumber) => queryTableData(true, pageNumber)"
          @size-change="handleSizeChange"
        />
      </div>
    </div>
    <div
      v-if="tipsBottomHtml"
      class="cc-table-tips-bottom"
      v-html="tipsBottomHtml"
    ></div>

    <el-dialog
      v-model="dialogVisible"
      :width="dialogWidth"
      :close-on-click-modal="false"
      :fullscreen="dialogFullscreen"
      :before-close="closeDialog"
      @close="dialogClose"
      class="cc-page-comp-dialog no-padding"
      append-to-body
      destroy-on-close
      draggable
    >
      <template #header>
        <div class="header" @dblclick="dialogFullscreen=!dialogFullscreen">
          <div class="title">{{dialogTitle}}</div>
          <div class="button">
            <cc-icon
              v-if="!dialogFullscreen"
              iconId="018dca8cad1b28075ecd"
              @click="dialogFullscreen=true"
              title="最大化"
            />
            <cc-icon
              v-if="dialogFullscreen"
              iconId="018dca8cad1b9b03c47f"
              @click="dialogFullscreen=false"
              title="缩小"
            />
          </div>
        </div>
      </template>
      <Page
        :dataPageId="dialogPageId"
        :inputParam="dialogInputParam"
        :disabled="true"
        :dialogMode="true"
        @updatePageName="name => dialogTitle = (name || '页面展示').split('_')[0]"
        @showDialogButton="showDialogButton"
      />
      <template #footer v-if="dialogFooter">
        <el-button
          type="info"
          @click="dialogVisible = false"
        >关闭</el-button>
        <el-button
          v-for="(button, index) in dialogButtonList"
          :key="index"
          class="base-button"
          :type="button.type || 'primary'"
          :style="button.color ? {
            'color': 'white',
            'background-color': button.color,
            'border': '1px solid ' + button.color
          } : {}"
          :loading="button.loading"
          @click="clickButton(button)"
        >{{button.name}}</el-button>
      </template>
    </el-dialog>

    <el-dialog
      v-model="selectedVisible"
      :close-on-click-modal="false"
      :before-close="closeDialog"
      class="cc-page-comp-dialog no-padding"
      append-to-body
      destroy-on-close
      fullscreen
      draggable
    >
      <template #header>
        <div class="header">
          <div class="title">已选数据</div>
        </div>
      </template>
      <div class="cc-page">
        <el-table
          width="100%"
          :data="selectedList"
          :border="true"
          :stripe="true"
          :show-overflow-tooltip="true"
        >
          <template #empty>
            <div class="el-table__empty-block">
              <span style="min-width: 100px">未选数据</span>
            </div>
          </template>
          <el-table-column
            v-for="column in columnList"
            :key="column.id"
            :header-align="align[column.headerAlign] || 'center'"
            :align="align[column.contentAlign] || 'center'"
            :prop="column.fieldName"
            :label="column.aliasName"
            :width="column.width && column.width < 0 ? null : column.width"
            :min-width="column.width && column.width < 0 ? column.width * -1 : null"
            :sortable="false"
            :fixed="column.fixed === '1' ? true : null"
            :show-overflow-tooltip="(column.canEdit === '1'
                && (column.fieldType === '字符'
                  || column.fieldType === '整数'
                  || column.fieldType === '小数'
                  || column.fieldType === '日期'
                  || column.fieldType === '联动')) ? false :
              {
                'effect': 'light',
                'raw-content': false,
                'placement': 'bottom',
                'popper-class': 'padding-10-15'
              }"
          >
            <template v-slot="scope">
              <!-- 字符、整数、小数、日期、时间、图片、视频、附件 -->
              <el-image
                v-if="column.fieldType === '图片' && scope.row[column.fieldName]"
                style="display: inline-table"
                preview-teleported
                hide-on-click-modal
                :src="imageUrl + scope.row[column.fieldName]"
                :preview-src-list="[imageUrl + scope.row[column.fieldName]]"
                fit="scale-down"
              />
              <cc-video-view
                v-else-if="column.fieldType === '视频' && scope.row[column.fieldName]"
                :videoId="scope.row[column.fieldName]"
              />
              <cc-affix-view
                v-else-if="column.fieldType === '附件' && scope.row[column.fieldName]"
                :affixId="scope.row[column.fieldName]"
                :reload="changePage"
              />
              <span
                v-else-if="column.styleList && column.styleList.length > 0"
                :class="['overflow-ellipsis custom-style', column.pageId ? 'relevance' : '']"
                @click="() => relevanceClick(column, scope.row)"
                v-html="parseFieldStyle(
                  column.styleList,
                  scope.row[column.fieldType === '联动' ? (column.fieldName + '_name') : column.fieldName],
                  scope.row
                )"
              ></span>
              <span
                v-else-if="column.fieldType === '小数'"
              >
                {{
                  scope.row[column.fieldName] === 0 || scope.row[column.fieldName]
                    ? tool.formatMoney(parseFloat(scope.row[column.fieldName] || '0'), column.dataField.fieldPrecision) : ''
                }}
              </span>
              <span
                v-else-if="column.fieldType === '时间'"
                :class="['overflow-ellipsis', column.pageId ? 'relevance' : '']"
                @click="() => relevanceClick(column, scope.row)"
              >{{date.formatLongDate(scope.row[column.fieldName])}}</span>
              <span
                v-else-if="column.fieldType === '字符'
              && (column.dataField.enumerateType === '单位多选'
                || column.dataField.enumerateType === '企业多选'
                || column.dataField.enumerateType === '部门多选')"
                class="overflow-ellipsis"
              ><cc-show-organizations :ids="scope.row[column.fieldName]" /></span>
              <span
                v-else-if="column.fieldType === '字符' && column.dataField.enumerateType === '人员多选'"
                class="overflow-ellipsis"
              ><cc-show-employees :ids="scope.row[column.fieldName]" /></span>
              <span
                v-else-if="column.fieldType === '字符' && column.dataField.enumerateType === '角色多选'"
                class="overflow-ellipsis"
              ><cc-show-roles :ids="scope.row[column.fieldName]" /></span>
              <span
                v-else-if="column.fieldType === '联动' && column.dataField.relevanceType.startsWith('字典')"
                class="overflow-ellipsis"
              ><cc-show-dict :dictCode="column.dataField.relevanceDict" :dictValue="scope.row[column.fieldName]" /></span>
              <span
                v-else
                :class="['overflow-ellipsis', column.pageId ? 'relevance' : '']"
                @click="() => relevanceClick(column, scope.row)"
                :style="column.contentColor ? ('color: ' + column.contentColor) : ''"
              >{{scope.row[column.fieldType === '联动' ? (column.fieldName + '_name') : column.fieldName]}}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <el-button
          type="info"
          @click="selectedVisible = false"
        >关闭</el-button>
      </template>
    </el-dialog>

    <el-dialog
      v-model="showFieldVisible"
      width="650px"
      class="cc-page-comp-dialog no-padding"
      append-to-body
      destroy-on-close
      draggable
    >
      <template #header>
        <div class="header">
          <div class="title">显示字段设置</div>
        </div>
      </template>
      <div class="cc-page cc-flex-column cc-grow-height">
        <el-row>
          <el-col :span="24" style="text-align: right;align-content: center;margin-bottom: 8px">
            <el-button
              v-if="!sortFieldInst"
              type="primary"
              @click="sortDataField"
            >开启排序</el-button>
            <el-button
              v-else
              type="info"
              @click="unSortDataField"
            >关闭排序</el-button>
            <el-button
              type="warning"
              @click="resetField"
            >恢复默认</el-button>
          </el-col>
        </el-row>
        <el-table
          ref="sortFieldTable"
          :show-overflow-tooltip="false"
          tooltip-effect="light"
          class="field-table edit-table"
          width="100%"
          :data="editColumns"
          row-key="id"
          :border="true"
          :stripe="false"
          @row-click="fieldRowClick"
        >
          <el-table-column
            type="selection"
            width="50"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            label="字段名称"
            :min-width="120"
            prop="aliasName"
          />
          <el-table-column
            header-align="center"
            label="列宽"
            :width="120"
            prop="width"
          >
            <template #header>
              <el-tooltip>
                <template #content>
                  <div>0时为自动宽度,负数时为最小宽度</div>
                </template>
                <span style="display: inline-flex">
                  <span style="margin-right: 5px">列宽</span>
                  <cc-icon iconId="018dca8ec9890493be26" />
                </span>
              </el-tooltip>
            </template>
            <template #default="scope">
              <el-input-number v-model="scope.row.width" controls-position="right" :min="-1000" style="width: 100%"/>
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            label="表头对齐方式"
            width="110"
            prop="headerAlign"
          >
            <template #default="scope">
              <el-select v-model="scope.row.headerAlign">
                <el-option label="居左" value="居左"></el-option>
                <el-option label="居中" value="居中"></el-option>
                <el-option label="居右" value="居右"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            label="内容对齐方式"
            width="110"
            prop="contentAlign"
          >
            <template #default="scope">
              <el-select v-model="scope.row.contentAlign">
                <el-option label="居左" value="居左"></el-option>
                <el-option label="居中" value="居中"></el-option>
                <el-option label="居右" value="居右"></el-option>
              </el-select>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <el-button
          type="info"
          @click="showFieldVisible = false"
        >取消</el-button>
        <el-button
          type="primary"
          @click="saveShowField"
        >确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { h, ref, onMounted, nextTick, onUnmounted, markRaw, inject, computed } from 'vue';
import loading from '@/utils/loading';
import api from "@/http/api";
import tool from '@/utils/tool';
import Page from "@/codeless/view/page.vue";
import { ElMessage } from "element-plus";
import TableEditItem from "@/codeless/view/table-edit-item.vue";
import { checkButtonShow } from '@/codeless/js/codeless';
import date from "@/utils/date";
import { useCache } from "@/utils/cache";
import emitter from "@/utils/bus";
import { useUserStore } from '@/pinia/modules/user';
import { getDataTable, getDataFieldList } from '@/utils/codeless';
import screenFull from 'screenfull';
import Sortable from "sortablejs";
import { useDevice } from '@/utils/device';

const emit = defineEmits(['buttonClick', 'editChange', 'showDetail', 'selectionChange']);
const props = defineProps({
  pageCompId: String,
  dataTableId: String,
  dataFormId: String,
  buttonList: Array,
  pkFieldName: {
    type: String,
    default: 'id'
  },
  dataFieldList: Array,
  autoHeight: String,
  showRefresh: String,
  pageSelected: {
    type: String,
    default: '0'
  },
  defaultQuery: Object,
  inputParam: {
    type: Object,
    default: () => {}
  },
  inputParamList: {
    type: Object,
    default: () => {}
  }
});

const { isMobile } = useDevice();
const initializing = ref(true);
const userStore = useUserStore();
const imageUrl = ref(import.meta.env.VITE_IMAGE_PATH);
const queryInfo = ref({
  inputParamList: props.inputParamList || {},
  pageNumber: 1,
  pageSize: 20
});
const queryData = ref({});
const querying = ref(false);
const changePage = ref(false);
const tableBox = ref();
const dataTable = ref();
const dataTotal = ref(0);
const dataList = ref([]);
const colspan = ref(false);
const colspanField = ref([]);
const colspanList = ref([]);
const showSummary = ref(false);
const summaryFieldId = ref('');
const summaryName = ref('合计');
const summaryFieldIds = ref([]);
const dataFieldList = ref([]);

const tableInfo = ref({});
const allColumnList = ref({});
const columnList = ref({});
const showColumns = ref([]);
const buttonList = ref({});
const tipsTopHtml = ref('');
const tipsBottomHtml = ref('');
const align = ref({'居左': 'left', '居中': 'center', '居右': 'right'});

const dialogTitle = ref('');
const dialogWidth = ref('');
const dialogFullscreen = ref(false);
const dialogFooter = ref(false);
const dialogField = ref({});
const dialogVisible = ref(false);
const dialogPageId = ref('');
const dialogInputParam = ref({});
const dialogMode = inject('dialogMode', props.dialogMode || false);
const dialogButtonList = ref([]);
const autoRefresh = ref(false);
const selectedVisible = ref(false);
const selectedList = ref([]);
const selectedRows = ref([]);
const showFieldVisible = ref(false);
const editColumns = ref([]);

const sortFieldTable = ref();
const sortFieldInst = ref();
const { wsCache } = useCache();

const buttonClick = (button, data) => {
  emit('buttonClick', button, data)
};

const sortChange = (sort) => {
  const field = columnList.value.find(item => item.id === sort.column.rawColumnKey);
  const fieldName = field.fieldType === '联动' ? (field.fieldName + '_name') : field.fieldName;
  if (sort.order === 'ascending') {
    queryInfo.value.sortField = fieldName;
    queryInfo.value.sortType = 'asc';
  } else if (sort.order === 'descending') {
    queryInfo.value.sortField = fieldName;
    queryInfo.value.sortType = 'desc';
  } else {
    queryInfo.value.sortField = null;
    queryInfo.value.sortType = null;
  }
  queryTableData(true, 1);
};

const relevanceClick = async(column, row) => {
  const field = columnList.value.find(item => item.id === column.id);
  if (!field
    || !field.pageId
    || typeof row[field.fieldName] === 'undefined'
    || row[field.fieldName] == null
    || row[field.fieldName] === '') return;
  await showFieldPage(field, row);
}

const showFieldPage = async(field, data) => {
  const inputParam = {};
  JSON.parse(field.pageFieldJson || '[]').forEach(param => {
    if (param.fieldName && data[param.fieldName]) {
      inputParam[param.pageParamId] = data[param.fieldName];
    } else if (!param.fieldName && param.fieldId) {
      inputParam[param.pageParamId] = param.fieldId;
      inputParam[param.pageParamName] = param.fieldId;
    }
  });
  if (field.openScriptId) {
    loading.showLoading();
    const param = {dataTableField: field, inputParam: inputParam};
    const res = await api.runScript(field.openScriptId, param);
    if (field.showExecuteResult === '1' && res.message) {
      ElMessage.info(res.message);
    }
    loading.hideLoading();
  }
  dialogField.value = field;
  dialogTitle.value = (field.pageName || '页面展示').split("_")[0];
  dialogWidth.value = field.dialogWidth ? field.dialogWidth : '800px';
  dialogFullscreen.value = isMobile.value || field.fullscreenDialog === '1';
  dialogPageId.value = field.pageId;
  dialogFooter.value = field.showCloseButton === '1';
  dialogInputParam.value = inputParam;
  dialogVisible.value = true;
};

const showDialogButton = (buttonList) => {
  dialogButtonList.value = buttonList;
};

const clickButton = (button) => {
  button.loading = true;
  try {
    button.click();
  } catch (e) {
    console.log(e);
  } finally {
    button.loading = false;
  }
}

const showFullscreen = () => {
  if (screenFull.isEnabled) {
    screenFull.toggle(tableBox.value);
  }
};

const tableFullscreen = ref(false);
const toggleTableFullscreen = () => {
  if (screenFull.isFullscreen) {
    if (document.fullscreenElement && document.fullscreenElement.id && document.fullscreenElement.id === tableBox.value.id) {
      tableFullscreen.value = screenFull.isFullscreen;
    }
  } else {
    tableFullscreen.value = false;
  }
};

const showHeaderSetting = () => {
  unSortDataField();
  const list = tool.deepClone(allColumnList.value);
  showFieldVisible.value = true;
  editColumns.value = [];
  if (!showColumns.value || showColumns.value.length === 0) {
    editColumns.value = list;
    editColumns.value.forEach(item => item.checked = true);
    nextTick(() => {
      sortFieldTable.value.toggleAllSelection();
    });
  } else {
    showColumns.value.forEach(item => {
      const column = list.find(field => field.id === item.id);
      if (column) {
        column.width = item.width;
        column.headerAlign = item.headerAlign;
        column.contentAlign = item.contentAlign;
        column.checked = true;
        editColumns.value.push(column);
      }
    });
    list.forEach(field => {
      if (!showColumns.value.find(column => column.id === field.id)) {
        field.checked = false;
        editColumns.value.push(field);
      }
    });

    nextTick(() => {
      editColumns.value.forEach(item => {
        sortFieldTable.value.toggleRowSelection(item, item.checked === true);
      });
    });
  }
};

const saveShowField = () => {
  const key = getStoreKey();
  const showFields = sortFieldTable.value.getSelectionRows();
  if (showFields && showFields.length > 0) {
    showColumns.value = showFields;
    wsCache.set(key, JSON.stringify(showColumns.value));
  } else {
    showColumns.value = [];
    wsCache.delete(key);
  }

  resolveShowColumn();
  showFieldVisible.value = false;
};

const fieldRowClick = (row) => {
  sortFieldTable.value.toggleRowSelection(row);
};

const getStoreKey = () => {
  return (props.pageCompId || 'pcId') + '_' + (props.dataTableId || 'dtId');
};

const resolveShowColumn = () => {
  if (!showColumns.value || showColumns.value.length  === 0) {
    columnList.value = allColumnList.value;
  } else {
    const list = [];
    showColumns.value.forEach(item => {
      const field = allColumnList.value.find(column => column.id === item.id);
      field.width = item.width;
      field.headerAlign = item.headerAlign;
      field.contentAlign = item.contentAlign;
      list.push(item);
    });
    columnList.value = list.length > 0 ? list : allColumnList.value;
  }
};

const resetField = () => {
  showColumns.value = [];
  wsCache.delete(getStoreKey());
  resolveShowColumn();
  showFieldVisible.value = false;
};

const sortDataField = () => {
  if (sortFieldInst.value) {
    sortFieldInst.value.destroy();
  }

  if (sortFieldTable.value) {
    const el = sortFieldTable.value.$el.querySelector(".el-table__body-wrapper tbody");
    sortFieldInst.value = Sortable.create(el, {
      handle: '.el-table__row',
      onEnd: ({ newIndex, oldIndex}) => {
        const list = tool.deepClone(editColumns.value);
        const currRow = list.splice(oldIndex, 1)[0];
        list.splice(newIndex, 0, currRow);
        nextTick(() => {
          editColumns.value = list;

          nextTick(() => {
            editColumns.value.forEach(item => {
              sortFieldTable.value.toggleRowSelection(item, item.checked === true);
            });
          });
        });
      }
    });
  }
};

const unSortDataField = () => {
  if (sortFieldInst.value) {
    sortFieldInst.value.destroy();
  }
  sortFieldInst.value = null;
};

const closeDialog = (done) => {
  const viewer = document.getElementsByClassName('el-image-viewer__wrapper')[0];
  if(!viewer) {
    done();
  }
};

const dialogClose = () => {
  if (dialogField.value) {
    if (dialogField.value.closeRefresh === '1') {
      refreshData();
    }

    if (dialogField.value.closeScriptId) {
      const data = {dataTableField: dialogField.value, inputParam: dialogInputParam.value}
      api.runScript(dialogField.value.closeScriptId, data).then(res => {
        if (dialogField.value.showExecuteResult === '1' && res.message) {
          ElMessage.info(res.message);
        }
      });
    }
  }
};

const rowClassName = ({ row }) => {
  return selectedRows.value.find(item => item[props.pkFieldName] === row[props.pkFieldName]) ? 'is-selected' : '';
};

const rowClick = (row, column, event) => {
  if (!(event.ctrlKey || event.metaKey)) {
    dataTable.value.clearSelection();
  }
  dataTable.value.toggleRowSelection(row);
};

const rowDbClick = (row) => {
  if (props.dataFormId) {
    emit('showDetail', row);
  } else {
    const field = columnList.value.find(field => field.pageId && row[field.fieldName]);
    if (field) showFieldPage(field, row);
  }
};

const selectionChange = (selectionList) => {
  selectedRows.value = selectionList;
  emit('selectionChange', selectionList);
};

const handleSizeChange = (pageSize) => {
  queryInfo.value.pageSize = pageSize
  queryTableData(true, 1)
};

const queryTableData = (showLoading, pageNumber) => {
  let url;
  if (props.pageCompId) {
    url = '/codeless/page-comp/' + props.pageCompId + '/page';
  } else {
    url = '/codeless/' + props.dataTableId + '/page';
  }

  if (typeof pageNumber !== 'undefined') {
    queryInfo.value.pageNumber = pageNumber
  }

  querying.value = typeof showLoading === 'undefined' ? true : showLoading || false;
  const data = Object.assign({}, queryData.value, queryInfo.value);
  api.post(url, data).then((res) => {
    dataTotal.value = res.totalRecord || 0;
    dataList.value = markRaw(res.data);
    queryInfo.value.pageSize = res.pageSize || queryInfo.value.pageSize;
    calcColspan(dataList.value);
    querying.value = false;
    changePage.value = !changePage.value;
    selectionChange([]);
    cleanRefreshData();
  }).catch(() => {
    querying.value = false
  });
};

const loadData = async(tableId) => {
  loading.showLoading();
  try {
    await loadTableInfo(tableId);
    await loadDataField(tableInfo.value.modelId);
    await initTableData();
    await initQueryInfo();
    await initColumnList();
    await initButtonList();
    await initTips();
    loading.hideLoading();
  } finally {
    loading.hideLoading();
  }
};

const initTips = async() => {
  if (tableInfo.value.tipsOrigin === '输入') {
    if (tableInfo.value.tipsPosition === '顶部') {
      tipsTopHtml.value = tableInfo.value.tipsHtml || {};
    } else {
      tipsBottomHtml.value = tableInfo.value.tipsHtml || {};
    }
  }

  if (tableInfo.value.tipsOrigin === '脚本' && tableInfo.value.tipsScriptId) {
    const res = await api.runScript(tableInfo.value.tipsScriptId);
    if (tableInfo.value.tipsPosition === '顶部') {
      tipsTopHtml.value = res.data || '';
    } else {
      tipsBottomHtml.value = res.data || '';
    }
  }
};

const loadTableInfo = async(tableId) => {
  tableInfo.value = await getDataTable(tableId);

  colspanList.value = [];
  colspanField.value = [];
  tableInfo.value.fieldList.forEach(field => {
    if (field.ifMerge === '1') {
      colspanField.value.push(field.fieldName);
    }
  });
  colspan.value = colspanField.value.length > 0;

  if (tableInfo.value.totalJson && tableInfo.value.totalJson.startsWith("{")) {
    const json = JSON.parse(tableInfo.value.totalJson);
    summaryFieldId.value = json.summaryFieldId || '';
    summaryName.value = json.summaryName || '合计';
    summaryFieldIds.value = json.summaryFieldIds || [];
    showSummary.value = json.showSummary === '1' && summaryFieldIds.value.length > 0;
  } else {
    showSummary.value = false;
    summaryFieldIds.value = [];
  }
};

const loadDataField = async(modelId) => {
  if (props.dataFieldList && props.dataFieldList.length > 0) {
    dataFieldList.value = props.dataFieldList;
  } else {
    dataFieldList.value = await getDataFieldList(modelId);
  }
};

const colspanMethod = (data) => {
  const columnSpan = colspanList.value[data.column.property];
  return columnSpan && columnSpan[data.rowIndex] || [1, 1];
};

const calcColspan = (dataList) => {
  if (!colspan.value || colspanField.value.length <= 0 || !dataList || dataList.length <= 0) return;

  colspanList.value = [];
  colspanField.value.forEach((field, fieldIndex) => {
    let preValue = '';
    let sameIndex = 0;
    colspanList.value[field] = [];
    colspanList.value[field].push(new Array(dataList.length).fill([1, 1]));

    dataList.forEach((data, rowIndex) => {
      const currValue = data[field] || '';
      if (currValue !== preValue) {
        sameIndex = 0;
        preValue = currValue;
      }
      sameIndex++;

      let endIndex = -1;
      const preField = fieldIndex > 0 ? colspanField.value[fieldIndex - 1] : null;
      if (preField) {
        endIndex = getEndIndex(colspanList.value, preField, rowIndex);
      }

      if (sameIndex === 1 && (endIndex === -1 || endIndex > rowIndex)) {
        let rowCount = countRows(dataList, rowIndex, field, currValue);

        if (endIndex > 0 && rowIndex + rowCount > endIndex) {
          preValue = undefined;
          rowCount = endIndex - rowIndex - 1;
        }
        colspanList.value[field][rowIndex] = [rowCount > 1 ? rowCount : 1, 1];
      } else {
        colspanList.value[field][rowIndex] = [0, 0];
      }
    });
  });
};

const countRows = (dataList, startIndex, field, value) => {
  let count = 0;
  for (let i=startIndex; i<dataList.length; i++) {
    if ((dataList[i][field] || '') === value) {
      count++;
    } else {
      break;
    }
  }
  return count;
};

const getEndIndex = (colspanList, field, rowIndex) => {
  for (let i=rowIndex; i>=0; i--) {
    const [rowCount] = colspanList[field][i] || [0, 0];
    if (rowCount > 0) {
      return i + rowCount;
    }
  }
  return 0;
};

const getSummaries = (param) => {
  if (summaryFieldIds.value.length === 0) return [];

  const { columns, data } = param;
  const sums = [];
  columns.forEach((column, index) => {
    if (!column.property) {
      sums[index] = '';
      return;
    }

    const field = allColumnList.value.find(item => item.fieldName === column.property);
    if (!field || !field.dataField) {
      sums[index] = '';
      return;
    }

    if (field.dataField.id === summaryFieldId.value) {
      sums[index] = h('div',
        {
          style: {
            width: '100%',
            textAlign: 'right',
            fontWeight: 'bold'
          }
        },
        [summaryName.value]
      );
      return;
    }

    if (summaryFieldIds.value.indexOf(field.dataField.id) < 0) {
      sums[index] = '';
      return;
    }

    const values = data.map((item) => Number(item[field.dataField.fieldName]))
    if (!values.every((value) => Number.isNaN(value))) {
      const result = `${values.reduce((prev, curr) => {
        const value = Number(curr)
        if (!Number.isNaN(value)) {
          return prev + curr
        } else {
          return prev
        }
      }, 0)}`;

      if (field.styleList && field.styleList.length > 0) {
        sums[index] = h('div', { innerHTML: parseFieldStyle(field.styleList, result, data) });
      } else {
        if (field && field.dataField.fieldType === '小数') {
          sums[index] = tool.formatMoney(parseFloat(result || '0'), field.dataField.fieldPrecision || 0);
        } else {
          sums[index] = result;
        }
      }
    } else {
      sums[index] = '';
    }
  });

  return sums;
};

const initTableData = async() => {
  queryInfo.value.pageNumber = 1;
  queryInfo.value.pageSize = tableInfo.value.defaultPageSize || queryInfo.value.pageSize;
  queryData.value = {};
  dataList.value = [];
};

const initQueryInfo = async() => {
  const inputParamList = [];
  (props.inputParamList || []).forEach(inputParam => {
    if (inputParam.length < 2) return;

    const field = dataFieldList.value.find(item => item.id === inputParam[0]);
    if (field) {
      inputParamList.push([field.fieldName, inputParam[1], inputParam.length >=3 ? inputParam[2] : ''])
    }
  });

  queryInfo.value.inputParamList = inputParamList;
  queryData.value = Object.assign(queryData.value, props.defaultQuery || {});
};

const initButtonList = async() => {
  buttonList.value = (props.buttonList || [])
    .filter(item => item.showPosition && item.showPosition.indexOf('行内') >= 0);
};

const initColumnList = async() => {
  const fieldList = tool.deepClone(tableInfo.value.fieldList) || [];

  for (let item of fieldList) {
    const find = dataFieldList.value.find(field => field.id === item.fieldId);
    if (find) {
      item.fieldType = find.fieldType;
      item.fieldName = find.fieldName;
      item.inputType = find.inputType;
      item.fieldSize = find.fieldSize;
      item.enumerate = find.enumerate;
      item.enumerateType = find.enumerateType;
      item.relevanceType = find.relevanceType;
      item.relevanceDict = find.relevanceDict;
      item.enumerateValue = find.enumerateValue;
      item.dataField = find;
    }
  }

  allColumnList.value = fieldList;
  try {
    const json = wsCache.get(getStoreKey()) || '';
    if (json && json.startsWith("[")) {
      showColumns.value = JSON.parse(json);
    }
  } catch (ignore) {
    showColumns.value = [];
  }
  resolveShowColumn();
};

const parseFieldStyle = (styleList, value, data) => {
  if (!styleList || styleList.length === 0) return value || '';
  value = value || '';

  let resultHtml = '';
  for (const style of styleList) {
    if (style.originValue !== value && style.originValue !== "{all}") continue;
    if (!value && style.originValue !== "{all}") continue;

    if (style.showType === '文字') {
      const targetValue = style.targetValue ? style.targetValue.replace('{currValue}', value || '') : (value || '');
      resultHtml = `<span
            class="${style.flash === '1' ? 'blinking' : ''}"
            style="color: ${style.showColor || 'inherit'}"
        >${targetValue}</span>`;
    } else if (style.showType === '标签') {
      const targetValue = style.targetValue ? style.targetValue.replace('{currValue}', value || '') : (value || '');
      resultHtml = `<span
            class="label ${style.flash === '1' ? 'blinking' : ''}"
            style="background-color: ${style.showColor || 'inherit'}"
        >${targetValue}</span>`;
    } else if (style.showType === '图形') {
      resultHtml = `<span
            class="
                shape
                ${style.targetValue === '圆形' ? 'circle' : style.targetValue === '正方形' ? 'square' : 'oval'}
                ${style.flash === '1' ? 'blinking' : ''}"
            style="background-color: ${style.showColor || 'inherit'}"
        ></span>`;
    } else if (style.showType === '时间') {
      const code = style.targetValue ? style.targetValue.replace('{currValue}', value || '0') : (value || '0');
      let targetValue = new Function('return ' + code)();
      if (!isNaN(targetValue)) {
        targetValue = date.formatLongDate(parseInt(targetValue));
      }
      resultHtml = `<span
            class="${style.flash === '1' ? 'blinking' : ''}"
            style="color: ${style.showColor || 'inherit'}"
        >${targetValue}</span>`;
    } else if (style.showType === '时长') {
      const code = style.targetValue ? style.targetValue.replace('{currValue}', value || '0') : (value || '0');
      let targetValue = new Function('return ' + code)();
      if (!isNaN(targetValue)) {
        targetValue = tool.formatTime(parseInt(targetValue));
      }
      resultHtml = `<span
            class="${style.flash === '1' ? 'blinking' : ''}"
            style="color: ${style.showColor || 'inherit'}"
        >${targetValue}</span>`;
    } else if (style.showType === '进度条') {
      let progress = '0';
      try {
        const code = style.targetValue ? style.targetValue.replace('{currValue}', value || '0') : (value || '0');
        const targetValue = new Function('return ' + code)();
        if (!isNaN(targetValue)) {
          progress = parseFloat(targetValue).toFixed(2);
        }
      } catch (e) {
        console.log("样式设置解释出错！", e)
      }
      resultHtml = `<span class="progress-box">
          <span
            class="progress-line"
            style="background: linear-gradient(90deg, ${style.showColor || 'inherit'}, ${style.showColor || 'inherit'} ${progress}%, transparent 0);"
          ><span class="progress-text">${progress}%</span></span>
        </span>`;
    } else if (style.showType === '存储单位') {
      const code = style.targetValue ? style.targetValue.replace('{currValue}', value || '0') : (value || '0');
      const targetValue = tool.formatBytes(new Function('return ' + code)());
      resultHtml = `<span
            class="${style.flash === '1' ? 'blinking' : ''}"
            style="color: ${style.showColor || 'inherit'}"
        >${targetValue}</span>`;
    } else if (style.showType === 'js脚本' && style.targetValue) {
      const args = {
        data: data,
        user: userStore.getUserData(),
        org: userStore.getOrgData()
      };
      try {
        const value = new Function("args", style.targetValue)(args);
        resultHtml = `<span
              class="${style.flash === '1' ? 'blinking' : ''}"
              style="color: ${style.showColor}"
          >${value || ''}</span>`;
      } catch (e) {
        console.log("样式设置解释出错！", e)
      }
    }
  }
  return resultHtml;
};

const changeValue = (prop, row) => {
  const data = {};
  data[props.pkFieldName] = row[props.pkFieldName];
  data[prop] = row[prop];
  emit('editChange', data);
};

const refreshData = (showLoading) => {
  cleanRefreshData();
  queryTableData(showLoading);
};

const reloadData = (data) => {
  queryData.value = Object.assign(queryData.value, data || {});
  queryTableData(true, 1);
};

const getSelectedData = () => {
  return dataTable.value.getSelectionRows();
};

const getData = () => {
  return dataTable.value.getSelectionRows();
};

const selectedCnt = computed(() => {
  return dataTable.value?.getSelectionRows().length;
});

const showSelected = () => {
  selectedList.value = dataTable.value?.getSelectionRows();
  selectedVisible.value = true;
};

const getQueryData = () => {
  return Object.assign(queryData.value, queryInfo.value);
};

const init = async() => {
  if (!props.dataTableId) {
    return;
  }

  initializing.value = true;
  await loadData(props.dataTableId);
  await nextTick(() => initializing.value = false);
  queryTableData(true, 1);
};

const autoRefreshKey = "auto_refresh_" + props.pageCompId + "_" + props.dataTableId;
const initAutoRefresh = () => {
  const cacheValue = wsCache.get(autoRefreshKey) || '0';
  autoRefresh.value = cacheValue === '1';
}

const changeAutoRefresh = () => {
  wsCache.set(autoRefreshKey, autoRefresh.value ? '1' : '0');
}

const refreshDataTimeout = ref();
const checkAndRefreshData = () => {
  if (!dialogMode && autoRefresh.value) {
    cleanRefreshData();
    refreshDataTimeout.value = setTimeout(() => refreshData(false), 500);
  }
};

const cleanRefreshData = () => {
  if (refreshDataTimeout.value) {
    clearTimeout(refreshDataTimeout.value);
  }
};

const validate = (callback) => {
  callback(true);
};

const isDragger = ref(false);
const isMouseDown = ref(false);
const initialMouseX = ref();
const initialScrollLeft = ref();

const handleKeyDown = (event) => {
  if (event.key === ' ') {
    event.preventDefault();
    isDragger.value = !isDragger.value;
  }
};

const handleMouseDown = (event) => {
  if (!isDragger.value) return;
  initialMouseX.value = event.clientX || 0;
  const body = dataTable.value.$el.querySelector('.el-table__body-wrapper .el-scrollbar__wrap');
  initialScrollLeft.value = body.scrollLeft;
  isMouseDown.value = true;
};

const handleMouseUp = () => {
  if (!isDragger.value) return;
  isMouseDown.value = false;
};

const handleMouseMove = (event) => {
  if (!isDragger.value) return;
  event.preventDefault();
  if (isDragger.value && isMouseDown.value) {
    const deltaX = event.clientX - initialMouseX.value;
    const body = dataTable.value.$el.querySelector('.el-table__body-wrapper .el-scrollbar__wrap');
    body.scrollLeft = initialScrollLeft.value - deltaX;
  }
};

const isOverflow = ref(false);
const checkOverflow = () => {
  setTimeout(() => {
    const body = dataTable.value.$el.querySelector('.el-table__body-wrapper .el-scrollbar__wrap');
    isOverflow.value = body && body.clientWidth < body.scrollWidth;
  }, 100)
};

onMounted(async() => {
  await init();
  initAutoRefresh();
  checkOverflow();
  emitter.on("model.data.change." + tableInfo.value.modelId, checkAndRefreshData);

  if (tableInfo.value.showFull === '1') {
    if (screenFull.isEnabled) {
      screenFull.on('change', toggleTableFullscreen);
    }
  }
  window.addEventListener('resize', checkOverflow);
});

onUnmounted(() => {
  emitter.off("model.data.change." + tableInfo.value.modelId, checkAndRefreshData);

  if (tableInfo.value.showFull === '1') {
    screenFull.off('change', toggleTableFullscreen);
  }

  window.removeEventListener('resize', checkOverflow);
});

defineExpose({ reloadData, validate, refreshData, getQueryData, getData, getSelectedData })
</script>

<style scoped lang="scss">
.cc-table :deep(.el-table__body-wrapper .cell .relevance) {
  cursor: pointer;
  color: #2989da;
}
.cc-button {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
.cc-button :deep(.el-button:focus-visible) {
  outline: unset;
}
.cc-table-footer {
  display: flex;
  flex-direction: row;
  margin-top: 5px;
  .cc-table-refresh {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .cc-pagination {
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
  }
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 1
  }
}
.cc-table .wrap .overflow-ellipsis {
  height: unset;
  white-space: pre-wrap;
}
.cc-table :deep(.blinking) {
  animation: blink 1.5s infinite;
}

.cc-table :deep(.label) {
  display: block;
  padding: 8px 16px;
  border-radius: 5px;
  line-height: 1;
  color: white;
}

.cc-table :deep(.shape.circle) {
  display: block;
  padding: 9px;
  border-radius: 9px;
}

.cc-table :deep(.shape.square) {
  display: block;
  padding: 8px;
  border-radius: 2px;
}

.cc-table :deep(.shape.oval) {
  display: block;
  width: 18px;
  height: 12px;
  border-radius: 50% / 50%;
}

.cc-table .custom-style:has(.progress-box) {
  width: 100%;
}
.cc-table .custom-style :deep(.progress-box) {
  display: flex;
  background-color: #e2e2e2;
  border-radius: 30px;
  height: 32px;
  text-align: center;
}
.cc-table .custom-style :deep(.progress-line) {
  width: 100%;
  border-radius: 30px;
  height: 32px;
}
.cc-table .custom-style :deep(.progress-text) {
  padding: 0 15px;
}
.cc-table {
  position: relative;
  background-color: var(--page-background);
  .show-table-fullscreen {
    position: absolute;
    cursor: pointer;
    top: 5px;
    right: 5px;
    z-index: 1000;
    font-size: 18px;
    color: #000000;
  }
}
.padding-10 {
  padding: 10px;
  .show-table-fullscreen {
    top: 15px;
    right: 15px;
  }
}
@media screen and (max-width: 600px) {
  .el-dialog .el-dialog__header {
    display: none;
  }
  .cc-table-footer .cc-table-refresh {
    display: none;
  }
  :deep(.el-pagination) {
    .el-pagination__jump {
      display: none;
    }
    .el-pagination__sizes {
      display: none;
    }
  }
}
@media screen and (min-width: 601px) and (max-width: 1024px) {
  .el-dialog .el-dialog__header {
    display: none;
  }
  .cc-table-footer .cc-table-refresh {
    display: none;
  }
  :deep(.el-pagination) {
    .el-pagination__sizes {
      display: none;
    }
  }
}
</style>